import { useContext } from 'react'
import TodoContext from '../TodoContext'

const TodoList = () => {
  console.log('todolist被调用')

  // 使用context
  // todos就是context中共享的数据
  const { todos, onDeleteTodo, onToggleTodo } = useContext(TodoContext)
  console.log('获取的共享数据', todos)
  return (
    <ul className='todo-list'>
      {todos.map(todo => (
        <li key={todo.id} className={todo.done ? 'completed' : ''}>
          <div className='view'>
            <input
              className='toggle'
              onChange={() => {
                onToggleTodo(todo.id)
              }}
              type='checkbox'
            />
            <label>{todo.text}</label>
            <button className='destroy' onClick={() => onDeleteTodo(todo.id)} />
          </div>
          <input className='edit' defaultValue='Create a TodoMVC template' />
        </li>
      ))}
    </ul>
  )
}

export default TodoList
